import React,{useEffect} from 'react'
import {NavLink} from 'react-router-dom'
import './doc.css'
import RouteWithSubRoutes from './RouteWithSubRoutes';

const Doc = (props) => {
    console.log(props);
    useEffect(()=>{
        if(!localStorage.getItem('userinfo')){
            props.history.push({
                pathname:'/login',
                state:props.location
            })
        }
    },[])
    return (
        <div className='doc'>
            <div className="content">
                {/* 嵌套路由 */}
			    {
                    props.routes.map((item)=>(
                        <RouteWithSubRoutes {...item} />
                        )
                    )
			    }  
            </div>
            <ol>
                <li><NavLink to='/doc/core'>核心概念</NavLink></li>
                <li><NavLink to='/doc/guide'>高级指引</NavLink></li>
                <li><NavLink to='/doc/api'>API</NavLink></li>
                <li><NavLink to='/doc/hooks'>Hooks</NavLink></li>
            </ol>
     
        </div>
    )
}

export default Doc;

 